﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>不良品管理</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <style>
        .demo-login-container {
            display: flex;
            flex-wrap: wrap; /* 允许换行 */
        }

        .layui-form-item.layui-inline {
            width: 48%; /* 设置每个表单项的宽度 */
            margin-right: 4%; /* 添加间距 */
            box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
        }

            .layui-form-item.layui-inline:nth-child(2n) {
                margin-right: 0; /* 去除每行第二个元素的右边距 46*/
            }

        .layui-form-label {
            width: 90px; /* 根据需要调整标签宽度 */
        }

        .layui-input-block, .layui-input-inline {
            margin-left: 70px; /* 确保输入框与标签对齐 */
        }

        .layui-form-select {
            width: 189px;
        }
    </style>
    <form class="layui-form" action="" style="margin:25px">
        <div class="layui-form-item layui-inline">
            <div class="layui-input-inline">
                <input type="text" id="defectiveNo" placeholder="不良品编号" autocomplete="off" class="layui-input">
            </div>
            <button type="button"  class="layui-btn layui-bg-blue" onclick="search()">查询</button>
            <button type="button" class="layui-btn layui-bg-green" onclick="showAddForm()">新增</button>
        </div>
    </form>
    <div style="margin:25px">
        <table id="processTable" class="layui-table">
            <thead>
                <tr style="background-color:antiquewhite" >
                    <th>不良品编号</th>
                    <th>不良品名称</th>
                    <th>图片</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody>
                <!-- 添加了id属性 -->
                <!-- 不良品项列表数据将填充在这里 -->
            </tbody>
        </table>
    </div>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script src="//unpkg.com/jquery/dist/jquery.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;


            window.showAddForm = function () {
                layer.open({
                    type: 1,
                    title: '新增不良品',
                    area: ['800px', '600px'],
                    content: `<form class="layui-form"  id="defectiveShowForm">
                                                    <div>
                                                                <div class="layui-form-item">
                                                                    <label class="layui-form-label">不良品编号：</label>
                                                                    <div class="layui-input-block">
                                                                                    <input type="text" name="defectiveNo" id="defectiveNo"  placeholder="请输入,忽略将自动生成" autocomplete="off" class="layui-input">
                                                                    </div>
                                                                </div>
                                                                <div class="layui-form-item">
                                                                    <label class="layui-form-label">不良品名称：</label>
                                                                    <div class="layui-input-block">
                                                                                    <input type="text" name="defectiveName" id="defectiveName" required lay-verify="required" placeholder="请输入不良品名称" autocomplete="off" class="layui-input">
                                                                    </div>
                                                                </div>

                                                                


                                                                <div class="layui-form-item">
                                                                    <label class="layui-form-label">头像</label>
                                                                    <div class="layui-input-block">
                                                                             <input type="file" name="file" id="file" required lay-verify="required" placeholder="头像" onchange="uploadImage()" autocomplete="off" class="layui-input">
                                                                     <img id="img" src="" alt="上传后显示图片" style="max-width:100px;max-height:100px;">
                                                                    </div>
                                                                </div>


                                                                <div class="layui-form-item">
                                                                    <div class="layui-input-block">
                                                                                     <button type="button" class="layui-btn" onclick="addDefective()">提交</button>
                                                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                                                    </div>
                                                                </div>
                                                                            </div>
                                                            </form>`
                });
                //在弹出层中渲染表单
                form.render();
            };
            //添加不良品方法
            window.addDefective = function() {
                 var requestData = {
                     defectiveNo:document.getElementById('defectiveNo').value,
                     defectiveName:document.getElementById('defectiveName').value,
                     annex :"",
                    image: document.getElementById('img').src,
                    createName: "雷鑫",
                 }
                 if(requestData.defectiveName==""){
                     layer.msg('请输入不良品名称');
                     return;
                 }
                 
                 console.log(requestData);
                 debugger;
                // 发送 AJAX 请求
                fetch('@ViewBag.GlennQuigmrire' + '/api/Defective/DefectivesCreate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg('新增成功');
                        search(); // 新增后加载工序列表
                        layer.closeAll(); // 关闭弹框
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        layer.msg('新增失败');
                    });

                
             }
            //查询不良品方法
            window.search = function () {
                var requestData = {
                    defectiveNo: $("#defectiveNo").val()||null,
                    defectiveName: null
                }
                //发送ajax请求
                $.post({
                    url: '@ViewBag.GlennQuigmrire' + '/api/Defective/DefectivesSearch',
                    data: JSON.stringify(requestData), // 使用 JSON 格式
                    async: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        console.log(res); // 修正控制台打印
                        var count = "";
                        $.each(res.data, function () {
                            count += ` <tr>
                            <th> ${this.defectiveNo}</th>
                            <th> ${this.defectiveName}</th>
                                      <th><img src="${this.image}" alt="图片" style="max-width:60px;max-height:60px;"></th>
                                    <th>${this.createDate.replace("T", " ").substring(0, 19)} </th>
                        </tr> `
                        })
                        $("tbody").html(count)
                    }
                })
            }


            //上传图片方法并显示
            window.uploadImage = function () {

                var fd = new FormData();
                var file = document.getElementById("file").files[0];
                fd.append("file", file);
                $.ajax({
                    url: '@ViewBag.GlennQuigmrire' + '/api/Defective/UploadFile',
                    type: "POST",
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res+"1111111"); // 修正控制台打印
                        $("#img").attr("src", '@ViewBag.GlennQuigmrire' + res);

                    },
                    error: function (res) {
                        console.log(res); // 修正控制台打印
                    }
                });


                // var file = document.getElementById("file").files[0];
                // var reader = new FileReader();
                // reader.readAsDataURL(file);
                // $.post({
                //     url: '@ViewBag.GlennQuigmrire' + '/api/Defective/UploadFile',
                //     data:  ,
                //     processData: false,
                //     contentType: false,
                //     success: res => {
                //         console.log(res); // 修正控制台打印
                //         $("#img").attr("src", '@ViewBag.GlennQuigmrire'+ res.data);
                //     }
                // })
            }

           
           

            $(function () {
                search()
            });
        })
    </script>




  


</body>


</html>

